.dwz-panel,
.panel {
	position: relative;
	background: @paneBg;

	.panel-header {
		position: relative;
		.flex-wrap-center;
		.b-line;
		min-height: 44px;
		font-size: @l3;

		.panel-title {
			.padding-h;
			.flex-1;
			font-weight: bold;
			font-size: @l3;
			color: @titleColor;
		}

		.item-right {
			.padding-h;
			.box-round;
			overflow: hidden;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			text-align: right;
			line-height: 100%;
			min-width: 40px;

			// dwz-icon图标
			i {
				.flex-wrap-center;
				line-height: 30px;
				color: @tabTxtColor;
				transition: all 200ms;
				&.is-collapse {
					transform: rotateZ(180deg);
				}
			}
		}
	}

	.panel-content {
		position: relative;
		min-height: 60px;
	}

	&.no-line {
		.panel-header,
		.panel-header::before {
			border: none;
		}
	}
}

.filter-title {
	color: @infoColor;
	padding: 5px 10px;
	font-size: @l4;
	clear: both;
}

.filter-content {
	padding: 0 10px;
	.clearfix;

	li {
		border-radius: 6px;
		background: @paneBg;
		color: @descColor;
		margin-right: 3%;
		margin-bottom: 10px;
		width: 22.75%;
		height: 36px;
		line-height: 36px;
		overflow: hidden;
		float: left;
		text-align: center;
		font-size: @l4;

		&:nth-child(4n) {
			margin-right: 0;
		}

		&.active {
			color: @btnTxtColorPrimary;
			background: @btnBgPrimary;
			font-weight: bold;
		}
	}

	&.col-3 {
		li {
			width: 31.2%;
			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
	&.col-2 {
		li {
			width: 48.5%;
			&:nth-child(2n) {
				margin-right: 0;
			}
		}
	}
}

#mask-filter-panel {
	.filter-blur;
	z-index: 900;
}

#filter-panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 20%;
	display: none;
	background: @defaultBg;
	z-index: 901;
}

#mask-filter-select {
	z-index: 910;
}

#filter-select {
	position: absolute;
	top: 0;
	right: 0;
	height: 0;
	left: 0;
	display: none;
	overflow: hidden;
	background: @paneBg;
	z-index: 911;
	transition: bottom 0.5s ease;

	&.open {
		display: flex;
		flex-direction: column;
	}

	&:before {
		.t-line;
		content: ' ';
		height: 1px;
	}

	.content {
		background: transparent;
		top: 1px;
	}

	.column-box {
		.flex-wrap;
		.full-size;

		.column-item {
			position: relative;

			.list {
				margin: 1px;

				.item {
					&:before {
						border: none;
					}
				}
			}

			.flex-1;

			.r-line;

			&:last-child {
				border: none;
			}

			&.gray {
				background: @inputBg;

				.list {
					.item {
						background: transparent;
					}
				}
			}
		}
	}
}
